<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<title>画板</title>
	<link rel="stylesheet" type="text/css" href="/css/style.css" />
	<link rel="stylesheet" type="text/css" href="/css/style1.css" />
	<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="/css/font-awesome.css" />
	<link rel="stylesheet" type="text/css" href="/css/demo.css" />
	<link rel="stylesheet" type="text/css" href="/css/color.css" />
	<link rel="stylesheet" type="text/css" href="/css/tools.css"/>
</head>
<body>
	<div class="container">
		<div id="note"></div>
		<nav id="bt-menu" class="bt-menu" >
			<a  class="bt-menu-trigger">
				<i class="fa fa-reorder fa-3x" style="color:white;"></i>
			</a>
			<ul>
			    <li>
					<a   shape="curve" data-toggle="tooltip" data-placement="right" title="画 笔">
						<i class="fa fa-pencil fa-3x"></i>
					</a>
				</li>
				<li class="demo_box_1">
			        <span class="pop_ctrl">
				       <a  data-toggle="tooltip" data-placement="right" title="颜料板">
							<i class="fa fa-dashboard fa-3x"></i>
				       </a>
					</span>
				    <ul class="demo_ul_1">
					    <div class="demo_li">荧光色</div>
						<li class="demo_li">
							<button color="rgba(0,245,255,0.5)" name="pen_color" class="btn_color transparent_pink" ></button>
						</li>
						<li class="demo_li">
							<button color="rgba(255,255,0,0.5)" name="pen_color" class="btn_color transparent_blue"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(0,255,0,0.5)" class="btn_color transparent_sky"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(255,106,106,0.5)" name="pen_color" class="btn_color transparent_green"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(255,0,255,0.5)" name="pen_color" class="btn_color transparent_yellow"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(205,197,191,0.5)" name="pen_color" class="btn_color transparent_orange"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(72,118,255,0.5)" name="pen_color" class="btn_color cerulean1"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(224,255,255,0.5)" name="pen_color" class="btn_color blue1"></button>
						<li class="demo_li">
							<button color="rgba(255,165,79,0.5)" name="pen_color" class="btn_color ice_blue1"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(32,178,170,0.5)" name="pen_color" class="btn_color pink1"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(0,255,255,0.5)" name="pen_color" class="btn_color red1"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(0,255,0,0.5)" name="pen_color" class="btn_color brown1"></button>
						</li>
						<div class="demo_li">普通色</div>
						<li class="demo_li">
							<button color="rgba(254,254,254,0.6)" name="pen_color" class="btn_color white" ></button>
						</li>
						<li class="demo_li">
							<button color="rgba(142,148,100,0.6)" name="pen_color" class="btn_color gray"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(0,0,0,0.6)" class="btn_color black"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(255,239,0,0.6)" name="pen_color" class="btn_color yellow"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(255,154,16,0.6)" name="pen_color" class="btn_color orange"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(92,145,0,0.6)" name="pen_color" class="btn_color green"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(0,189,239,0.6)" name="pen_color" class="btn_color cerulean"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(0,81,213,0.6)" name="pen_color" class="btn_color blue"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(90,49,148,0.6)" name="pen_color" class="btn_color ice_blue"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(230,0,140,0.6)" name="pen_color" class="btn_color pink"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(230,16,33,0.6)" name="pen_color" class="btn_color red"></button>
						</li>
						<li class="demo_li">
							<button color="rgba(190,133,84,0.6)" name="pen_color" class="btn_color brown"></button>
						</li>
					</ul>
			    </li>
				<li  class="demo_box_3">
				    <span class="pop_ctrl">
						<a  data-toggle="tooltip" data-placement="right" title="线条粗细" id="eraser">
							<i class="fa fa-indent fa-3x" ></i>
						</a>
					</span>
					<ul class="demo_ul_3">
					    <div class="demo_li">大小</div>
						<li class="demo_li">
							<button pensize='1' class="btn_size">
								<i class="fa fa-circle" style="font-size:10px;"></i>
							</button>
						</li>
						<li class="demo_li">
							<button pensize='3' class="btn_size">
								<i class="fa fa-circle" style="font-size:15px;"></i>
							</button>
						</li>
						<li class="demo_li">
							<button pensize='5' class="btn_size">
								<i class="fa fa-circle" style="font-size:20px;"></i>
							</button>
						</li>
						<li class="demo_li">
							<button pensize='7' class="btn_size">
								<i class="fa fa-circle" style="font-size:25px;"></i>
							</button>
						</li>
						<li class="demo_li">
							<button pensize='9' class="btn_size">
								<i class="fa fa-circle" style="font-size:30px;"></i>
							</button>
						</li>
						<li class="demo_li">
							<button pensize='11' class="btn_size">
								<i class="fa fa-circle" style="font-size:32px;"></i>
							</button>
						</li>	
                        <li class="demo_li">
							<button pensize='13' class="btn_size">
								<i class="fa fa-circle" style="font-size:35px;"></i>
							</button>
						</li>
						<li class="demo_li">
							<button pensize='15' class="btn_size">
								<i class="fa fa-circle" style="font-size:40px;"></i>
							</button>
						</li>							
					</ul>
				</li>
				<li  class="demo_box_4">
				    <span class="pop_ctrl">
						<a  data-toggle="tooltip" data-placement="right" title="橡 皮" id="eraser">
							<i class="fa fa-eraser fa-3x" ></i>
						</a>
					</span>
					<ul class="demo_ul_3">
					    <div class="demo_li">大小</div>
						<li class="demo_li">
							<button erasersize='3' class="btn_size">
								<i class="fa fa-eraser" style="font-size:10px;"></i>
							</button>
						</li>
						<li class="demo_li">
							<button erasersize='5' class="btn_size">
								<i class="fa fa-eraser fa-lg" style="font-size:15px;"></i>
							</button>
						</li>
						<li class="demo_li">
							<button erasersize='7' class="btn_size">
								<i class="fa fa-eraser" style="font-size:20px;"></i>
							</button>
						</li>
						<li class="demo_li">
							<button erasersize='9' class="btn_size">
								<i class="fa fa-eraser" style="font-size:25px;"></i>
							</button>
						</li>
						<li class="demo_li">
							<button erasersize='11' class="btn_size">
								<i class="fa fa-eraser" style="font-size:30px;"></i>
							</button>
						</li>
						<li class="demo_li">
							<button erasersize='13' class="btn_size">
								<i class="fa fa-eraser" style="font-size:32px;"></i>
							</button>
						</li>
						<li class="demo_li">
							<button erasersize='17' class="btn_size">
								<i class="fa fa-eraser" style="font-size:35px;"></i>
							</button>
						</li>
						<li class="demo_li">
							<button erasersize='23' class="btn_size">
								<i class="fa fa-eraser" style="font-size:40px;"></i>
							</button>
						</li>							
					</ul>
				</li>
				<li>
					<a widget="label"  data-toggle="tooltip" data-placement="right" title="标记框">
						<i class="fa fa-pencil-square-o fa-3x"></i>
					</a>
				</li>
				
				<li>
					<a shape="line"  data-toggle="tooltip" data-placement="right" title="直 线">
						<i class="fa fa-italic fa-3x"></i>
					</a>
				</li>
				<li>
					<a shape="rectangle"  data-toggle="tooltip" data-placement="right" title="矩 形">
						<i class="fa fa-adn fa-3x"></i>
					</a>
				</li>
				<li>
					<a shape="ellipse" data-toggle="tooltip" data-placement="right" title="椭 圆">
						<i class="fa fa-database fa-3x"></i>
					</a>
				</li>
				<li id="upload">
					<a data-toggle="tooltip" data-placement="right" title="保存">
						<i class="fa fa-save fa-3x"></i>
					</a>
				</li>
			</ul>
		</nav>
		
		
		<!--模态框添加收藏-->
		 
				<div class="modal fade" id="modal-save" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog" style="width:400px;">
						<div class="modal-content">
							<div class="modal-header" style="background-color:#ECECEC;">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								<h4 class="modal-title" id="myModalLabel" >
									添加到我的收藏
								</h4>
							</div>
							<form  id="form_save" method='post'>
								<div class="modal-body">
									<label for="save_name">名称:</label>
									<input type="text" id="save_name" class="form-control" required/><br/>
									<label for="save_class">分类:</label><br/>
									<select id="save_class">
										
									</select><br><br>
									<div class="link">
										<a id="new_class" href="#">新建分类</a>
									</div>
								</div>
								<div class="modal_footer">
									<button type="button" class="btn_cancel" data-dismiss="modal">关闭</button> 
									<button type="button" id="sure_save" class="btn_save">保存</button>
								</div>
								<input type="hidden" id="auth" name="auth" value="" />
								<input type="hidden" id="typeId" name="typeId" value="" />
								<input type="hidden" id="NoteData" name="NoteData" value=""/>
								<input type="hidden" id="CompressData" name="CompressData" value=""/>
								<input type="hidden" id="collectid" name="collectid" value="<?=$file['id']?>"/>
							</form>
						</div>
					</div>
				</div>
		<!--模态框-->
	
	
	<link rel="stylesheet" href="/css/NoteLabel.css" type="text/css">
	
	<script src="/js/view/jquery.min.js"></script>
	<script src="/js/view/bootstrap.min.js"></script>
	<script src="/js/view/classie.js"></script>
	<script src="/js/view/jquery.popmenu.js"></script>
	<script src="/js/view/jquery.navmenu.js"></script>

	<script src="/js/lib/Common.js" type="text/javascript"></script>
	<script src="/js/lib/Drag.js" type="text/javascript"></script>

	<script src="/js/note/Note.js" type="text/javascript"></script>
	<script src="/js/note/Event.js" type="text/javascript"></script>
	<script src="/js/note/Container.js" type="text/javascript"></script>
	<script src="/js/note/WidgetLayer.js" type="text/javascript"></script>
	<script src="/js/note/DrawLayer.js" type="text/javascript"></script>
	<script src="/js/note/CacheLayer.js" type="text/javascript"></script>
	<script src="/js/note/BackgroundLayer.js" type="text/javascript"></script>
	<script src="/js/note/Painter.js" type="text/javascript"></script>

	<script src="/js/widget/Widget.js" type="text/javascript"></script>
	<script src="/js/widget/WidgetFactory.js" type="text/javascript"></script>
	<script src="/js/widget/WidgetLabel.js" type="text/javascript"></script>


	<script src='/js/main.js' type="text/javascript"></script>
	<script src="/js/circle.js" type="text/javascript"></script>
	
		
		<script>
			var data = 
<?=
<<<EOT
JSON.parse('{$file['info']}');
EOT
?>;
		console.log(data);
		
		var img_background = new Image();
		img_background.src = data.background;
		data.background = img_background;
		
		var img_cache = new Image();
		img_cache.src = data.cache;
		data.cache = img_cache;
		
		var note = new Note.Container('note', 'note-canvas', data.width, data.height, true);
		note.load(data);
		
	</script>
	
</body>
</html>